<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <meta charset="UTF-8">
    <title>选手表格</title>
    <style>
        .table11_6 table {
            width:100%;
            margin:15px 0;
            border:0;
        }
        .table11_6 th {
            background-color:#96C7ED;
            color:#000000
        }
        .table11_6,.table11_6 th,.table11_6 td {
            font-size:0.95em;
            text-align:center;
            padding:4px;
            border-collapse:collapse;
        }
        .table11_6 th,.table11_6 td {
            border: 1px solid #73b4e7;
            border-width:1px 0 1px 0;
            border:2px inset #ffffff;
        }
        .table11_6 tr {
            border: 1px solid #ffffff;
        }
        .table11_6 tr:nth-child(odd){
            background-color:#dcecf9;
        }
        .table11_6 tr:nth-child(even){
            background-color:#ffffff;
        }
    </style>
    <script type="text/javascript">

        $(function () {

            ajaxT();

            $('#myForm').submit(function(event) {
                // 阻止表单默认提交行为
                event.preventDefault();
                ajaxT();
            });

            //$('#reset').click(function(event) {
                  // 阻止表单默认提交行为
            //    vent.preventDefault();
            //    var postData = {
            //       name: ''
            //};
            //    ajaxT(postData);
            //});
        });

        function ajaxT() {

            var url = "http://localhost:80/player/getPage";
            url = url.concat("?pageSize=10","&pageNo=1")

            var postData = {
                name: $('input[name=name]').val()
            };

            $.ajax({
                    type: "POST",
                    contentType: "application/json", //必须这样写
                    url: url,
                    data: JSON.stringify(postData),
                    datatype: "JSON",
                    success: function (result) {
                        console.log(JSON.stringify(result));
                        createTable(result.data.records);
                    }
                }
            );
        }

        //动态的创建一个table
        function createTable(data) {

            var tableStr = "<table class=table11_6>";
            tableStr = tableStr
                + "<th width='5%'>序号</td>"
                + "<th width='5%'><input id='checkAll' name='checkAll' type='checkbox' /></td>"
                + "<th width='10%'>英文姓名</td>"
                + "<th width='10%'>中文姓名</td>"
                + "<th width='10%'>绰号</td>"
                + "<th width='10%'>国家</td>"
                + "<th width='10%'>年龄</td>"
                + "<th width='10%'>世界排名</td>"
                + "<th width='10%'>排名赛冠军</td>"
                + "<th width='10%'>三大赛冠军</td>"
                + "<th width='15%'>操作</td>"
                + "</tr>"

            var len = data.length;
            if (len === 0) {
                tableStr = tableStr + "<tr style='text-align: center'>"
                    + "<td cols pan='6'><font color='#cd0a0a'>" + "暂无记录" + "</font></td>"
                    + "</tr>";
            } else{
                for (var i = 0; i < len; i++) {
                    tableStr = tableStr + "<tr>"
                        + "<td>" + (i + 1) + "</td>"
                        + "<td><input class='check' id='checkOne' name='checkOne' type='checkbox' value='" + data[i].key + "' /></td>"
                        + "<td>" + data[i].enName + "</td>"
                        + "<td>" + data[i].chName + "</td>"
                        + "<td>" + data[i].nickName + "</td>"
                        + "<td>" + data[i].nation + "</td>"
                        + "<td>" + data[i].age + "</td>"
                        + "<td>" + data[i].ranking + "</td>"
                        + "<td>" + data[i].titles + "</td>"
                        + "<td>" + data[i].threeCrowns + "</td>"
                        + "<td>"
                            + "<a href='http://localhost/player/playerAdd?id="+data[i].id+"'>查看</a>&nbsp;"
                            + "<a href='http://localhost/player/playerAdd?id="+data[i].id+"'>编辑</a>&nbsp;"
                            + "<a href='http://localhost/player/playerAdd?id="+data[i].id+"'>删除</a>"
                        "</td>"
                        + "</tr>";
                }
            }
            tableStr = tableStr + "</table>";
            //添加到div中
            $("#tableAjax").html(tableStr);
        }

    </script>
</head>

<body>
    <div align="center">
        <div>
            <a href="http://localhost/player/playerAdd">新增</a>
        </div>
        <div>
            <form class="panel-body" id="myForm">
                姓名: <input type="text" name="name"/>
                <button type="submit" class="btn btn-primary">查询</button>
                <button type="reset" class="btn btn-primary">刷新</button>
            </form>
        </div>
        <div id="tableAjax"></div>
    </div>
</body>
</html>
